<template>
   <div class="content-row">
     <div class="left-area content-row" :style="{background: color}">
     	<Icon class="icon" :type="icon" :size="iconSize" color="#fff"/>
 	  </div>
     <div class="right-area content-col">
       <div>
         <slot></slot>
       </div>
     </div>
   </div>
</template>

<script>
export default {
  name: 'InforCard',
  props: {
    color: {
      type: String,
      default: '#2d8cf0'
    },
    icon: {
      type: String,
      default: ''
    },
    iconSize: {
      type: Number,
      default: 20
    }
  }
}
</script>

<style lang="less">
.content-row{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	height: 117px;
}
.content-col{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	height: 117px;
}
.left-area{
width: 36%;
}
.right-area{
width: 64%;
}
</style>
